<template>
  <el-menu
    router
    :default-active="gupad"
    class="el-menu-vertical-demo"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
    :unique-opened="true"
  >
    <el-submenu
      v-for="(item, index) in menuList"
      :key="item.id"
      :index="item.path"
    >
      <template slot="title">
        <i :class="['icon',iconObj[item.path]]"></i>
        <span>{{ item.authName }}</span>
      </template>
      <el-menu-item
        v-for="menu in item.children"
        :key="menu.id"
        :index="'/' + item.path + '/' + menu.path"
        >
        {{ menu.authName }}</el-menu-item
      >
    </el-submenu>
  </el-menu>
</template>

<script>
import { api_menu } from "../../api/menu.js";
export default {
  data() {
    return {
      menuList: [],
      // 一级字体图标
      iconObj:{
        users:"el-icon-user",
        rights:"el-icon-key",
        goods:"el-icon-sell",
        orders:"el-icon-document",
        reports:"el-icon-s-help"
      },
    };
  },

  mounted() {
    this.query();
  },
  // 计算属性
  computed:{
    gupad(){
      return this.$route.path;
    }
  },

  methods: {
    async query() {
      let rst = await api_menu();
      let { data, meta } = rst;
      this.menuList = data;
      console.log(rst);
    },
  },
};
</script>

<style lang="less" scoped>
</style>